import { useEffect, useState, } from 'react';
import { useNavigate, useLocation } from "react-router-dom"
import styled from "styled-components"
import orgService from '@/api/index';
import { stat } from 'fs';
import { Pagination } from 'antd';
import { CircleLoading } from '@/components/CircleLoading';
import Empty from '@/components/Empty';
import LogingSt from "@/components/LogingSt"
const Containt = styled.div`
  .backbg0{
    background: #cfa972;
    line-height: 4rem;
  }
  .backbg1{
    background: #8fc31f;
    line-height: 4rem;
  }
  .backbg2{
    background: #f4ae00;
    line-height: 4rem;
  }
  .backbg3{
    background: #664e33;
    line-height: 4rem;
  }
  .ev-container-wap {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ev-line-1 {
    border: 1px solid #4096ff;
    width: 50px;
    height: 0;
    left: 0;
    top: 50%;
  }

  .ev-line-2 {
    border: 1px solid #4096ff;
    width: 50px;
    height: 0;
    left: 0;
    top: 50%;
  }

  .goods{
    width: 48%;
    height: 20rem;
    .img{
      width: 100%;
      height: 100%;
    }
    
  }

  .goods:nth-child(even){
    margin-right:  0 !important;
  } 

  .img{
    height: 368px;
  }
  .box{
    background: rgba(0, 0, 0, 0.75);
  }

  


`

function Alldetail() {
  const [menu, setMenu] = useState<any>([])
  const negative = useNavigate()
  const { state } = useLocation();
  const { id, imgUrl, children, name } = state.query

  console.log(imgUrl)

  const [list, setList] = useState<any>([])
  const [total, setTotal] = useState<number>(0)

  const [isLoading, setLoading] = useState<boolean>(false)
  const [current, setCurrent] = useState<number | string | any>(1)

  useEffect(() => {
    setLoading(true)
    orgService.allDetail({ id: id, page: 1, size: 10 }).then(res => {
      setLoading(false)
      if (res) {
        const { product, total } = res
        setList(product)
        setTotal(total)
      }
    }).catch(() => {
      setLoading(false)
    })
    return () => {

    }
  }, [name])

  const goDetail = (e: any) => {
    negative("/detail" + "?id=" + e.id, { replace: true, state: { query: e?.id } });
  }

  const onChange = (e: number) => {
    setCurrent(e)
    setLoading(true)
    orgService.allDetail({ id: id, page: e, size: 10 }).then(res => {
      setLoading(false)
      if (res) {
        console.log(res)
        const { product, total } = res
        setList(product)
        setTotal(total)
      }
    }).catch(() => {
      setLoading(false)
    })
  }

  const handleClick = (item: any) => {
    setLoading(true)
    orgService.allDetail({ id: item.id, page: 1, size: 10 }).then(res => {
      setLoading(false)
      if (res) {
        console.log(res)
        const { product, total } = res
        setList(product)
        setTotal(total)
      }
    }).catch(() => {
      setLoading(false)
    })
  }

  return (
    <Containt>
      {isLoading ? <>
        <LogingSt></LogingSt> <CircleLoading></CircleLoading></> : <>
        {imgUrl && <img className='w-full img' src={imgUrl}></img>}
        <div className="flex items-center text-center w-full justify-center mx-auto mt-10">
          <div className={"ev-line-1"}></div>
          <div className="text-4xl mr-5 ml-5 font-medium" style={{ color: '#4096ff' }}>{name}</div>
          <div className={"ev-line-2"}></div>
        </div>
        <div className='mx-auto w-[1200px] flex gap-x-2'>
          {
            children.length > 0 && children.map((item: any, index: number) => {
              return <div onClick={() => { handleClick(item) }} key={index} className={`cursor-pointer w-full   text-xl text-white text-center mt-10 items-center  h-16  backbg${index}`}>
                <div >{item.name}</div>
              </div>
            })
          }
        </div>
        <div className='mx-auto w-1200px flex flex-wrap justify-between mt-10'>
          {
            list.length > 0 ? list.map((item: any, index: number) => {
              return <div key={index} className={`goods mr-10  mb-10 cursor-pointer relative`} onClick={() => { goDetail(item) }}>
                <img className='img absolute inset-0 bg-cover bg-center z-0' src={item.titleUrl.split(",")[0]} alt=''></img>
                <div className="box opacity-0 hover:opacity-100 duration-300 absolute inset-0 z-10 flex flex-col justify-center items-center text-2xl text-white font-semibold">
                  <div className='w-full text-center px-2'>{item.name}</div>
                  <div className='absolute right-3 bottom-5 text-xl'>{"查看详情 >>"}</div>
                </div>
              </div>
            }) : <div className='mt-10 w-full'>
              <Empty search={false}></Empty>
            </div>
          }
        </div>
        {total > 0 && <div className='mx-auto w-1200px flex justify-center'>
          <Pagination current={current} total={total} showTotal={(total) => `共 ${total} 条`} onChange={onChange}></Pagination>
        </div>}
      </>}


    </Containt>
  );
}

export default Alldetail;
